<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app1">
    <p v-if="seen">你可以看见我</p>
    <ul v-for="book in bookList">
        <li>{{book}}</li>
    </ul>
    <p>{{message}}</p>
    <button v-on:click="reverseMessage">点击试一试</button>
    <input type="text" v-model="message">
</div>

<div id="app2">
    <button-counter></button-counter>
</div>

<div id="app3">
    <ol>
        <grocery-list
        v-for= "item in groceryList" 
        v-bind:todo="item" 
        v-bind:key="item.id"></groceryList>
    </ol>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app1 = new Vue({
        el: "#app1",
        data: {
            seen: true,
            bookList: [
                "spring in action",
                "Spring Cloud微服务与Docker实战",
                "c语言程序设计"
            ],
            message: "Vue in action!"
        },
        methods: {
            reverseMessage: function() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    });

    Vue.component("button-counter", {
        data: function(){
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">你点击了{{count}}次</button>'
    });

    var app2 = new Vue({
        el: "#app2",
        data: {
            
        }
    });

    Vue.component("grocery-list", {
        props: ["todo"],
        template: '<li>{{todo.id}}: {{todo.content}}</li>'
    });

    var app3 = new Vue({
        el: "#app3",
        data: {
            groceryList: [
                {id: "0", content: "水果"},
                {id: "1", content: "奶酪"},
                {id: "2", content: "面条"},
                {id: "3", content: "汉堡"}
            ]
        }
    });
</script>
</body>
</html>